<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="author" content="YZC">
	<meta name="copyright" content="YZC">
	<title>新增菜单 - ${setting.siteName}</title>
	<link href="${base}/favicon.ico" rel="icon">
	<link href="${base}/resources/admin/css/bootstrap.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/bootstrap-select.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/bootstrap-checkbox-x.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/animate.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/adminLTE.css" rel="stylesheet">
	<link href="${base}/resources/admin/css/common.css" rel="stylesheet">
	<!--[if lt IE 9]>
		<script src="${base}/resources/admin/js/html5shiv.js"></script>
		<script src="${base}/resources/admin/js/respond.js"></script>
	<![endif]-->
	<script src="${base}/resources/admin/js/jquery.js"></script>
	<script src="${base}/resources/admin/js/bootstrap.js"></script>
	<script src="${base}/resources/admin/js/bootstrap-select.js"></script>
	<script src="${base}/resources/admin/js/bootstrap-checkbox-x.js"></script>
	<script src="${base}/resources/admin/js/jquery.validate.js"></script>
	<script src="${base}/resources/admin/js/adminLTE.js"></script>
	<script src="${base}/resources/admin/js/common.js"></script>
	<script type="text/javascript">
	$().ready(function() {
	
		var $inputForm = $("#inputForm");
		var $parentId = $("#parentId");
		var $levelCode = $("#levelCode");
		
		[@flash_message /]
		
		$parentId.change(function() {
			$.ajax({
				url: "${base}/admin/menu/find_level_code",
				type: "POST",
				data: "parentId=" + parentId.value,
				dataType: "json",
				cache: false,
				success: function(data) {
					if (data.levelCode.length > 10) {
						$.alert("最高支持二级菜单!");
						return;
					}
					$levelCode.val(parseInt(data.levelCode) + 1);
				}
			});
		});
		
		// 表单验证
		$inputForm.validate({
			rules: {
				"menu.name": "required",
				"menu.icon": "required",
				"menu.url": {pattern: /^(http:\/\/|https:\/\/|ftp:\/\/|mailto:|\/|#).*$/i},
				"menu.level_code": "required"
			}
		});
	});
	</script>
</head>
<body class="hold-transition sidebar-mini">
	<div class="container-fluid">
		<section class="content-header">
			<h1>新增菜单</h1>
			<ol class="breadcrumb">
				<li>
					<a href="${base}/admin/index" target="_top">
						<i class="fa fa-home"></i>
						${message("admin.common.index")}
					</a>
				</li>
				<li class="active">新增菜单</li>
			</ol>
		</section>
		<section class="content">
			<div class="row">
				<div class="col-xs-12">
					<form id="inputForm" class="form-horizontal" action="${base}/admin/menu/save" method="post">
						<div class="box">
							<div class="box-body">
								<div class="form-group">
									<label class="col-xs-2 control-label item-required" for="name">${message("Menu.name")}:</label>
									<div class="col-xs-4">
										<input id="name" name="menu.name" class="form-control" type="text" maxlength="200">
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label">上级菜单:</label>
									<div class="col-xs-4">
										<select id="parentId" name="parentId" class="selectpicker form-control" data-size="10">
											<option value="">顶级分类</option>
											[#list menuTree as menu]
												<option value="${menu.id}">
													[#if menu.grade != 0]
														[#list 1..menu.grade as i]
															&nbsp;&nbsp;
														[/#list]
													[/#if]
													${menu.name}
												</option>
											[/#list]
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label" for="account">${message("Menu.type")}:</label>
									<div class="col-xs-4">
										<select id="type" name="type" class="selectpicker form-control" data-size="5">
											[#list types as type]
												<option value="${type}">${type}</option>
											[/#list]
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label item-required" for="level_code">${message("Menu.level_code")}:</label>
									<div class="col-xs-4">
										<input id="levelCode" name="menu.level_code" class="form-control" type="text" maxlength="32" [#if !menuTree?has_content]value="10001"[/#if] readonly="readonly"/>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label" for="url">${message("Menu.url")}:</label>
									<div class="col-xs-4">
										<input name="menu.url" class="form-control" type="text" maxlength="230">
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label item-required" for="icon">${message("Menu.icon")}:</label>
									<div class="col-xs-4">
										<input type="text" name="menu.icon" class="form-control" maxlength="100" value="fa fa-circle-o" />
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-2 control-label" for="is_enabled">${message("admin.common.setting")}:</label>
									<div class="col-xs-4 checkbox">
										<input id="isEnabled" name="menu.is_enabled" type="text" value="true" data-toggle="checkbox-x">
										<label for="isEnabled" class="cbx-label">${message("Menu.is_enabled")}</label>
									</div>
								</div>
							</div>
							<div class="box-footer">
								<div class="row">
									<div class="col-xs-4 col-xs-offset-2">
										<button class="btn btn-primary" type="submit">${message("admin.common.submit")}</button>
										<button class="btn btn-default" type="button" data-toggle="back">${message("admin.common.back")}</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</section>
	</div>
</body>
</html>